	<template>
	<div class="homeSty">
	 <h3 class="newTitle">{{photoInfo.title}}</h3>
	 <p class="newDetail">
	 	<span>发表时间：{{photoInfo|dateFormat}}</span>
	 	<span>点击：{{photoInfo.click}}次</span>
	 </p>
	 <div class="thumbImg">
	 	<vue-preview :slides="thumbNewImages"></vue-preview>
	 	<!--<img class="preview-img" :src="thumbItem.src" v-for="(thumbItem,thumbIndex) in thumbImages" :key="thumbIndex" @click="$preview.open(thumbIndex, thumbImages)">-->
	 </div>
	 <p class="newContent" v-html="photoInfo.content">
	 </p>
	 
	 <comment :id="id"></comment>
	</div>
	</template>


	<script>
	import comment from '../sub-components/comment.vue'
	import {Toast} from 'mint-ui'
	export default{	
	  data(){
	    return{
	      photoInfo:{},
	      thumbImages:[],
	      thumbNewImages:[]

	    }
	  },
	  props:["id"],
	  components:{
	  	comment
	  },
	  mounted(){
 		this.gePhotoInfo()
	  this.geThumbImg()
	  },
	  created(){
	 

	  },
	  methods:{
	    async gePhotoInfo(){
	   	const {data}=await this.$http.get(`/api/getimageInfo/${this.id}`)
	   	if(data.status===0) {
	   		this.photoInfo=data.message[0]
	   	}
	   },
	   async geThumbImg(){
	   	const {data}=await this.$http.get(`/api/getthumimages/${this.id}`)
	   	if(data.status===0) {
	   		this.thumbImages=data.message
	   		this.thumbImages.forEach((v,i)=>{
	   			var imageObj={
	   				src:v.src,
	   				msrc:v.src,
	   				alt:i,
	   				title:'image'+i,
	   				w:600,
	   				h:400
	   			}
	   			this.thumbNewImages.push(imageObj)
	   		})
	   		console.log(this.thumbNewImages)
	   		
	   	}
	   }
	 }
}
	</script>

	<style lang="less">
	.homeSty{
		padding: 10px;
		padding-bottom:50px;
		.newTitle{
			font-size: 22px;
			color:#000;
		}
		.newDetail{
			font-size: 14px;
			color:#26a2ff;
			display: flex;
			justify-content:space-between;
			align-items: center;
		}
		.newContent{
			font-size: 18px;
			color:#ccc;
		}
		.thumbImg{
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			text-align: center;
			figure{
				display: inline-block;
				width: 30%;
				margin:0!important;
				padding:0!important;
				margin-bottom:10px!important;
				img{
					width: 90%;
				}
			}
		}
		.thumbImg:after{
			content:'';
			width: 30%

		}
		
	}

	</style>	
